<template>
    <div class="xtx-goods-page">
      <!-- 加载 -->
      <div  v-if="loading" class="container">
           <div class="loading"></div>
      </div>

      <div v-else class="container" >
        <template v-if="goodsObj.categories">
          <xtx-bread>
          <xtx-bread-item to="/">首页</xtx-bread-item>
          <xtx-bread-item :to="`/category/${goodsObj.categories[1].id}/${goodsObj.categories[1].name}`">{{ goodsObj.categories[1].name}}</xtx-bread-item>
          <xtx-bread-item :to="`/category/${goodsObj.categories[0].id}/${goodsObj.categories[0].name}`">{{ goodsObj.categories[0].name}}</xtx-bread-item>
          <xtx-bread-item>{{ goodsObj.name }}</xtx-bread-item>
        </xtx-bread>
        </template>
         <!-- 商品信息 -->
      <div class="goods-wrapper">
        <div class="media">
          <XtxImageView :images="goodsObj.mainPictures"></XtxImageView>
          <GoodsSales :goods="goodsObj"/>
        </div>
        <div class="spec">
          <GoodsInfo  :goods="goodsObj"/>
          <!-- sku组件 -->
          <xtx-sku :goods="goodsObj" @change="changeSkuFn" />
           <!-- 数量 -->
          <xtx-numbox :min="1" v-model="count" label="数量" @change="numberFn"/>
          <!-- 按钮 -->
          <XtxButton type="primary" @click="addCartFn" style="margin-top: 20px; margin-left: 60px">
            加入购物车
        </XtxButton>
        </div>
      </div>
      <GoodsFooter :goods="goodsObj"></GoodsFooter>
      </div>
    </div>
  </template>

<script>
import { getGoodsDetailAPI } from '@/api'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
import GoodsInfo from './components/goodsInfo.vue'
import GoodsSales from './components/goodsSales.vue'
import GoodsFooter from './components/goodsFooter.vue'
import { useStore } from 'vuex'
import Message from 'erabbit-ui/packages/components/Message'
export default {
  name: 'xtx-goods-page',
  components: {
    GoodsInfo,
    GoodsSales,
    GoodsFooter
  },
  setup () {
    const store = useStore()
    const count = ref(1)
    const loading = ref(true)
    const goodsObj = ref({}) // 数据
    const route = useRoute()
    // 获取商品下详情
    const getGoodsDetailFn = async (route) => {
      const res = await getGoodsDetailAPI(route.query.id)
      goodsObj.value = res.result
      loading.value = false
    }
    // 更新路由
    onBeforeRouteUpdate((to, from, next) => {
      getGoodsDetailFn(to)
      next()
    })
    getGoodsDetailFn(route)

    // 商品规格发生改变时触发
    const changeSkuFn = (obj) => {
      // 包含规格id说明已经选择过
      if (obj.skuId) {
        for (const key in obj) {
          goodsObj.value[key] = obj[key]
        }
        goodsObj.value.stock = obj.inventory
      } else {
        // 用户取消了规格
        count.value = 1
        goodsObj.value.skuId = null
        goodsObj.value.count = 1
      }
    }
    // 商品选择数量
    const numberFn = (count) => {
      goodsObj.value.count = count
    }
    // 加入购物车
    const addCartFn = () => {
      // 没选择商品规格
      if (!goodsObj.value.skuId) {
        Message({
          type: 'warn',
          text: '请选择商品规格'
        })
        // 没选择商品数量
      } else if (goodsObj.value.count === 0) {
        Message({
          type: 'warn',
          text: '请选择商品数量'
        })
      } else {
        // 没登录时加入购物车
        store.dispatch('cart/insertCartActions', { ...goodsObj.value, isEffective: true, selected: true })
        Message({
          type: 'success',
          text: '购物车添加成功'
        })
      }
    }
    return {
      goodsObj,
      loading,
      changeSkuFn,
      count,
      addCartFn,
      numberFn
    }
  }
}
</script>

  <style lang="less" scoped>
  .loading {
    height: 600px;
    border-top: 72px solid #f5f5f5;
    background: #fff url(../../assets/load.gif) no-repeat center / 80px 80px;
  }
  .goods-wrapper {
  display: flex;
  background: #fff;
  padding: 40px;
  .media {
    width: 480px;
    margin-right: 40px;
  }
}
  </style>
